import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import Button from '@kuiper-components/button';
import Dialog from '@kuiper-components/dialog';

import s from './style.module.css';

function Detail({ className, detail }) {
	const [visible, setVisible] = React.useState(false);

	return (
		<>
			<Button
				className={cn(className, s.detail)}
				link
				primary
				onClick={() => setVisible(true)}
			>
				查看详情
			</Button>
			<Dialog
				title="查看详情"
				visible={visible}
				onClose={() => setVisible(false)}
			>
				<div className={s.content}>
					<p className={s.session}>{detail}</p>
					<div className={s.btn}>
						<Button primary onClick={() => setVisible(false)}>
							确定
						</Button>
					</div>
				</div>
			</Dialog>
		</>
	);
}

Detail.propTypes = {
	className: PropTypes.string,
	detail: PropTypes.string.isRequired,
};
Detail.defaultProps = {
	className: '',
};

export default Detail;
